<template>
	<view >
	<!-- 404页面 -->
        <view class="noData" v-if="netWorkType == 'none'"><noData @handle="refresh"></noData></view>
        <view v-if="netWorkType != 'none'">
			<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa"></tui-skeleton>
			<view class="content">
				<view class="user-info" :style="'background: url('+OSS_HOST+'/img/vip_card.png) no-repeat;background-size: 100%;height: 400rpx;'">
					<view class="user-data">
						<view class="price">
							￥{{data.userInfo.business.price || '--'}}
						</view>
						<view class="use-time">
							{{data.userInfo.use_expire_at|| '--'}}
							
						</view>
					</view>
					
				</view>
				<view class="vip_fuwu">
					<view class="temp">
						<view class="img">
							<image :src="OSS_HOST+'img/vip_ty.png'" mode="aspectFit" style="width: 80rpx;height: 80rpx;"></image>
						</view>
						<view>
							<view class="title">体验有保障</view>
							<view class="text">退换无忧</view>
						</view>
					</view>
					<view class="temp">
						<view class="img">
							<image :src="OSS_HOST+'img/vip_score.png'" mode="aspectFit" style="width: 80rpx;height: 80rpx;"></image>
							<!-- <text class="iconfont">&#xe639;</text> -->
						</view>
						<view>
							<view class="title">省钱无忧</view>
							<view class="text">百分百诚意为你省钱</view>
							
						</view>
					</view>
					<view class="temp">
						<view class="img">
							<image :src="OSS_HOST+'img/vip_server.png'" mode="aspectFit" style="width: 80rpx;height: 80rpx;"></image>
							<!-- <text class="iconfont">&#xe639;</text> -->
						</view>
						<view>
							<view class="title">专属客服</view>
							<view class="text">1v1专属客服</view>
						</view>
					</view>
				</view>
				<view class="vip-item">
					<image :src="OSS_HOST+'img/vip_poupon.png'" mode="aspectFit"></image>
				</view>
				<view class="vip-item">
					<image :src="OSS_HOST+'img/vip_kefu.png'" mode="aspectFit"></image>
				</view>
				<view style="height: 200rpx;"></view>
				
			</view>
			<view class="vip-btn" >
				<view  >
					<text class="iconfont" style="color: #888;" v-if="!checkRule"  @tap="changeRule()"> &#xe638;</text>
					<text class="iconfont" style="color: red;" v-else @tap="changeRule()"> &#xe61e;</text>
					<text class="tip">
						点击开通则代表已知悉<text class="text">《相关协议》《交易规则》</text>
					</text>
				</view>
				<view  class="btn" @tap="pay">
					{{vipStatus?'立即续费':'立即开通'}}
					
				</view>
			</view>
			
		</view>	
		<!-- 规则框 -->
		<uni-popup class="rules-pop" ref="rulesPopup" type="center">
			<view class="rules-pop-box">
				<view class="tit">
					活动规则
				</view>
				<view class="text">
					{{rule}}
					<!-- 每邀请一个人注册 -->
				</view>
				<view class="text">
					<!-- 租赁轮椅,制氧机,睡眠仪可 -->
				</view>
				<view class="text">
					<!-- 减免6元租货费用。 -->
				</view>
				<view class="text">
					<!-- 最高可获得180元减免。 -->
				</view>
			</view>
		</uni-popup>
		
		<!-- 登录弹框 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom"/>
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		</view>			
	</view>
</template>

<script>
	import {oss_host} from '@/config/config.js';		
	
	import { mapGetters } from 'vuex';
	export default {
		data() {
			return {
				OSS_HOST:oss_host,
				data:{
					
					userInfo:[],
					
				},
				checkRule:false,
				vipStatus:false,
				
				
			};
		},
		components: {
			
		},
		computed: {
		    ...mapGetters(['netWorkType','loginStatus'])    
		},
		onLoad(e) {
			
			// if(typeof e.vipStatus !='undefined'){
			// 	this.vipStatus = e.vipStatus
			// }
			
			
			
		},
		onShow:function() {
			this.getList()
		},
		methods:{
			// 刷新的方法
			refresh(){
			   // window.addEventListener('pageshow', this.onShow);     
				this.getList()
			},
			// 初次进入
			getList(){
				// 获取初始列表
				let _this=this;
				var opt={
						url:'/user/userInfo',
						data:{
							type:_this.recordNum
						},
						success:function(res){
						//	console.log(res)
							if(res.status==1){
								// _this.data.list = res.data.list
								_this.data.userInfo = res.data.userInfo
								_this.vipStatus = res.data.userInfo.vipStatus
								_this.card_id = res.data.userInfo.business.id
								_this.skeletonShow = false
								
							}else{
								  let options = {
									msg: res.message,
									type:'danger'
								  };								
								_this.$refs.toast.showTips(options);
							
							}
						}
				};
				_this.$service.GetApi(opt); 
			},
			changeRule(){
				this.checkRule = !this.checkRule
			},
			//支付提交
			pay() { 
				
				//微信支付走下面
				let _this = this
				let dataObj = {}
				let payList = []
				if(_this.checkRule == false){
					uni.showToast({
						icon:'none',
						title:'亲！请阅读勾选相关协议和交易规则！'
					})
					return ;
				}
				if(!this.card_id){
					uni.showToast({
						icon:'none',
						title:'暂无会员卡。请联系管理员'
					})
					return ;
				}
				let  goods = {
					 type: 'vip_card',
					 pay_type: 2,
					 card_id:this.card_id||'1',
					 recharge_type:this.vipStatus?'renew':'append',
					 business_id:this.data.userInfo.business_id||0,
					 store_id:this.data.userInfo.store_id||0,
					
				}
				
				payList.push(goods)
				dataObj = {
					deliver_type: '',
					payList:payList,
					// remark:this.remark,					
				
				
				}
				console.log(dataObj)
				dataObj.coupon_id = this.couponId|| '';
				let title = '';
				
			
				// console.log(_this.data.child)
				var opt = {
					url: '/product/wxPay',
					data:dataObj,
					success: function(res) {
						if (res.status == 1) {
							// _this.showMaskloading = false;
							uni.setStorage({
								key: "payment_id",
								data: res.data.list.payment_id //需要存储的数据
							})
							
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.list.timeStamp,
								nonceStr: res.data.list.nonce_str,
								package: 'prepay_id=' + res.data.list.prepay_id,
								signType: 'MD5',
								paySign: res.data.list.paySign,
								success: function(res) {
									
									
			
									if (res.errMsg == 'requestPayment:ok') {
									
										_this.showMaskloading = true;
										//支付成功清除购物车
										// let payCartList = JSON.parse(_this.product)
										
										
										_this.successTime = setInterval(() => {
											console.log('successTime轮询---')
											_this.checkShopOrderEstate();
										}, 2000) 
									}
			
								},
								fail: function(err) {
									// console.log(322)
									if(	_this.successTime != ''){
										clearInterval(_this.successTime);
										_this.successTime = '';
									}
								 
								}
							});
			
			
			
						} else {
							let options = {
								msg: res.message,
								type: 'danger'
							};
							_this.$refs.toast.showTips(options);
							return
						}
			
					}
				};
			
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}
			
			},
			checkShopOrderEstate() {
				let _this = this
				// console.log('payment_id轮询---', uni.getStorageSync('payment_id'))
				var opt = {
					url: '/order/checkShopOrderEstate',
					data: {
						payment_id: uni.getStorageSync('payment_id')
					},
					success: function(res) {
						if (res.status == 1) {
							_this.showMaskloading = false;
							clearInterval(_this.successTime); //关闭轮询
							_this.successTime = '';
							// console.log(res.message)
							uni.removeStorageSync('payment_id');
							let list = res.data.list;
							_this.$refer.setVilit('/pages/PayOrder/success');
							let data = {
								course:1
							}
							let callback = function(url) {
			
							}
							_this.$refer.toUrl(callback, data,'reLaunch')
						} else {
							console.log(res.message)
						}
			
					}
				};
			
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}
			},
			
			
			
			
			
	
		}
	}
</script>

<style lang="scss">
	 @import "./index.scss";
</style>
